<template>
    <div class="drop-Sec">
      <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        label=""
        placeholder="请选择"
        @click="showPicker = true"
        right-icon="arrow-down"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="data"
          value-key="label"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
  </template>
  <script>
  export default {
    name: "DropSec",
    props: ["data"],
    data() {
      return {
        value: "",
        showPicker: false,
      };
    },
    methods: {
      onConfirm(value) {
        this.value = value.label;
        this.showPicker = false;
        this.$emit('drop-Sec',value)
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .drop-Sec {
    width: 324px;
    overflow: hidden;
    ::v-deep .van-field__control {
      width: 100%;
      height: 44px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #efefef;
      font-size: 14px;
      padding: 0 6px;
      // overflow: hidden;
    }
    ::v-deep .van-cell {
      padding: 0;
      width: 100%;
    }
    ::v-deep .van-field__right-icon {
      position: absolute;
      right: 8px;
    }
  }
  </style>
  